<script type="text/x-template"  id="caseSelect">
    <el-popover placement="bottom" v-model="show" width="500" trigger="click">
        <el-input v-model="queryData.title" placeholder="任务标题" style="width:220px;" clearable>
        </el-input>
        <el-button icon="el-icon-search" type="primary" @click="query()" ></el-button>
        <el-table :data="datagrid" @row-click="selectTask">
            <el-table-column prop="libraryName" label="用例库" width="100"> </el-table-column>
			<el-table-column prop="moduleName" label="模块名" width="100"> </el-table-column>
			<el-table-column prop="title" label="标题" width="200" show-overflow-tooltip></el-table-column>
			<el-table-column prop="type" label="用例类型" width="100"> </el-table-column>
			<el-table-column prop="level" label="优先级" width="80"> </el-table-column>
        </el-table>
       	<div style="margin:10px">
			    <el-pagination
			      :current-page="queryData.page"
			      :page-sizes="[5, 10]"
			      :page-size="queryData.rows"
			      layout="total, sizes, prev, pager, next, jumper"
			      :total="totalNum"
			      @size-change="handleSizeChange"
			      @current-change="handleCurrentChange"
			      @prev-click="handlePrevClick"
			      @next-click="handleNextClick">
			    </el-pagination>
		 </div>
        <el-input v-model="selectedContent" readonly="readonly" slot="reference" style="width:220px;"></el-input>
    </el-popover>
</script>
<script type="text/javascript">
		var caseSelectJs = {
			template:'#caseSelect'
			, props: {
			}
			,data() {
				return {
					queryData:{activeFlag:'1',page:1,rows:5}
					,selectedContent:''
					,datagrid:[]
					,totalNum:0
					,show: false
				}
			}
			,methods:{
				selectTask:function(row, event, column){
					this.selectedContent = row.title;
					this.selectedRow = row;
					this.show = false;
					this.$emit('selected',row);
				}
				,query:function(){
					var vm = this
					$.ajax({
						url :staticURL+'/testcase/caseLibrary/datagrid',
						data : vm.queryData,
						dataType : 'json',
						success : function(json) {
							vm.datagrid = json.rows;
							vm.totalNum = json.total;
							vm.selectedRow = null;
						}
					});
				}
				,handleSizeChange:function(val){
					var app = this;
					app.queryData.rows=val;
					app.query();
				}
				,handleCurrentChange:function(val){
					var app = this;
					app.queryData.page=val;
					app.query();
				}
				,handlePrevClick:function(val){
					var app = this;
					app.queryData.page=val;
					app.query();
				}
				,handleNextClick:function(val){
					var app = this;
					app.queryData.page=val;
					app.query();
				}
			}
		}
</script>
